<template>
  <div>
    <div class="flex items-center mb-2 gap-2">
      <div>{{ editorTitle }}</div>
      <el-button
        type="primary"
        circle
        size="small"
        @click="addOption"
        :icon="Plus"
      />
    </div>
    <div class="flex flex-col gap-2">
      <div
        class="border border-solid border-gray-200 shadow-md rounded-md p-2"
        v-for="(item, index) in options"
        :key="index"
      >
        <!-- 选项 -->
        <div class="my-2 flex items-center">
          <span>选项{{ index + 1 }}</span>
          <el-button
            type="danger"
            class="ml-1 scale-75"
            size="small"
            :icon="Minus"
            circle
            @click="deleteOption(index)"
          />
        </div>
        <!-- 是否上传图片 -->
        <div class="mb-2 gap-2 flex items-center">
          <span class="text-sm text-gray-500">图片上传状态：</span>
          <div v-if="item.value" class="flex">
            <span class="mr-2 text-sky-500">已上传</span>
            <el-link type="danger" @click="deletePic(index)">删除</el-link>
          </div>
          <span v-else class="text-gray-600">未上传</span>
        </div>
        <!-- 修改图片标题 -->
        <el-input class="mb-2" v-model="item.picTitle" placeholder="图片标题" />
        <!-- 修改图片描述 -->
        <el-input
          type="textarea"
          :rows="3"
          placeholder="图片描述"
          v-model="item.picDesc"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Component } from "vue";
import { Minus, Plus } from "@element-plus/icons-vue";
import type { IPicTitleDescStatusArr } from "@/types";
import type { IUpdateStatus } from "@/types/common";

const props = defineProps<{
  id: string;
  status: IPicTitleDescStatusArr;
  isShow: boolean;
  name: string;
  statusKey: string;
  editCom: Component;
  currentStatusIndex: number;
  editorTitle: string;
}>();

const updateStatus = inject("updateStatus") as IUpdateStatus;

const options = ref<IPicTitleDescStatusArr>(props.status);

// * 添加选项
const addOption = () => {
  // - 先添加一个选项
  updateStatus(props.statusKey);
};

// * 删除选项
const deleteOption = (index: number) => {
  updateStatus(props.statusKey, index);
};

// * 删除图片
const deletePic = (index: number) => {
  ElMessageBox.confirm('是否确认删除已上传的图片？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      // - 确认删除
      if (updateStatus) {
        updateStatus(props.statusKey, {
          link: "",
          index,
        });
      }
    })
    .catch(() => {
      // - 取消删除
      ElMessage.info('已取消删除');
    });
};
</script>

<style scoped></style>
